<template>
  <div class="container">
    <van-nav-bar
      class="flexer"
      title="wode "
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight"
      :border="false"
    >
      <van-icon slot="left" class="sr" name="arrow-left" />
      <div slot="right" class="read">标为已读</div>
      <div slot="title" class="title">我的消息</div>
    </van-nav-bar>
    <van-search v-model="value" placeholder="搜索用户" class="search" />
    <div class="list">
      <div class="listin">
        <van-icon name="manager" size="34" />
        <span class="lis">粉丝</span>
      </div>
      <div class="listin">
        <van-icon name="chat" class="color2" size="34" />
        <span class="lis">评论</span>
      </div>
      <div class="listin">
        <van-icon name="send-gift" class="color3" size="34" />
        <span class="lis">@我</span>
      </div>
      <div class="listin">
        <van-icon name="bell" class="color4" size="34" />
        <span class="lis">通知</span>
      </div>
    </div>
    <div class="bar">官方消息</div>
    <div class="newsong">
      <van-icon name="music" size="34" />
      <span class="bu">新歌发布</span>
    </div>
    <div class="bar">私信对话</div>
    <div
      class="newsong"
      v-for="(item, index) in data"
      :key="index"
      @click="showPopup(item.fromUser.userId)"
    >
      <van-image round class="img" :src="item.fromUser.avatarUrl" />
      <div class="privateletter">
        <div class="top">
          <span>{{ item.fromUser.nickname }}</span>
          <div class="time" v-if="compare(item.lastMsgTime)">
            {{ item.lastMsgTime | formateDate('HH:mm') }}
          </div>
          <div class="time" v-else-if="compare(item.lastMsgTime, 1)">
            昨天
            {{ item.lastMsgTime | formateDate('HH:mm') }}
          </div>
          <!-- <div class="time" v-else-if="compare(item.lastMsgTime, 2)">
            前天
            {{ item.lastMsgTime | formateDate('HH:mm') }}
          </div> -->
          <div class="time" v-else-if="layout2(item.lastMsgTime)">
            {{ item.lastMsgTime | formateDate('MM-dd') }}
          </div>
          <div class="time" v-else-if="layout(item.lastMsgTime)">
            {{ item.lastMsgTime | formateDate('yyyy-MM-dd') }}
          </div>
          <div class="time" v-else>
            {{ item.lastMsgTime | formateDate('HH:mm') }}
          </div>
        </div>
        <div class="bottom">
          <span class="bmsg">{{ item.lastMsg.msg }}</span>
          <div class="cercle" v-if="item.newMsgCount > 0">
            {{ item.newMsgCount }}
          </div>
        </div>
      </div>
    </div>
    <van-popup
      v-model="isMessage"
      position="right"
      v-if="isMessage"
      :style="{ width: '100%', height: '100%' }"
      ><message @is-message="imessage" :data="data" :userId="userId"
    /></van-popup>
  </div>
</template>

<script>
import { formatDate, compareDate } from './formadata'
import { Toast } from 'vant'
import { getmynews } from '@/api/mynews'
import message from './components/message'
// var moment = require('moment')
import moment from 'moment'
export default {
  data () {
    return {
      value: '',
      data: [],
      userId: '',
      compare: compareDate,
      isMessage: false,
      cookie: ''
    }
  },
  created () {
    this.getmynews()
  },
  methods: {
    imessage (res) {
      this.isMessage = res
    },
    showPopup (id) {
      this.userId = id
      this.isMessage = true
    },
    onClickLeft () {
      this.$router.back()
    },
    onClickRight () {
      Toast('按钮')
    },
    async getmynews () {
      this.cookie = this.$store.state.cookie
      const msg = await getmynews(this.cookie)
      const op = Object.values(msg)
      console.log(op)
      op[0].forEach(item => {
        this.data.push({
          ...item,
          lastMsg: JSON.parse(item.lastMsg)
        })
      })
      console.log(moment([2021, 0, 29]).fromNow(true))
    },
    layout (a) {
      const b = moment().format('YYYY')
      return moment(a).isBefore(b + '-01-01')
    },
    layout2 (a) {
      const b = moment().format('YYYY')
      const c = moment().format('YYYY-MM')
      const d = (Number(new Date().getDate()) - 2).toString()
      // console.log(d)
      return moment(a).isBetween(b + '-01-01', c + '-' + d)
    }
  },
  filters: {
    formateDate (data, fmt) {
      return formatDate(data, fmt)
    }
  },
  components: {
    message
  }
}
</script>

<style scoped lang="less">
.container {
  padding-top: 85px;
  .flexer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
  }
  .sr {
    font-size: 39px;
    color: black;
  }
  .read {
    border: 1px solid #dbd7d8;
    padding: 0 18px;
    border-radius: 30px;
  }
  .title {
    font-size: 42px;
    font-weight: 700;
  }
  .van-search__content {
    padding-left: 268px;
    border-radius: 30px;
  }
  .list {
    display: flex;
    margin-top: 16px;
    margin-bottom: 55px;
    .listin {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      .lis {
        font-size: 32px;
      }
      .van-icon {
        width: 108px;
        height: 108px;
        box-sizing: border-box;
        margin-bottom: 18px;
        text-align: center;
        padding: 14px;
        border-radius: 50%;
        color: #fff;
        background: #ea4359;
      }
      .color2 {
        background: #71b3e2;
      }
      .color3 {
        background: #e87357;
      }
      .color4 {
        background: #f5bf49;
      }
    }
  }
  .bar {
    width: 100%;
    height: 44px;
    // margin-top: px;
    padding-left: 28px;
    font-size: 28px;
    color: #636364;
    background: #f8f8f8;
  }
  .newsong {
    font-size: 38px;
    display: flex;
    align-items: center;
    .van-icon {
      margin: 22px 24px 0;
      width: 108px;
      height: 108px;
      box-sizing: border-box;
      margin-bottom: 18px;
      text-align: center;
      padding: 18px;
      border-radius: 50%;
      color: #fff;
      background: #ed6b66;
    }
    .privateletter {
      display: flex;
      flex-direction: column;
      flex: 1;
      justify-content: space-around;
      padding-right: 24px;
      .top {
        display: flex;
        justify-content: space-between;
        margin-top: -12px;
        // background: red;
        .time {
          font-size: 20px;
          padding-top: 18px;
          color: rgb(153, 153, 153);
        }
      }
      .bottom {
        display: flex;
        justify-content: space-between;
        margin-top: 24px;
        font-size: 22px;
        color: rgb(153, 153, 153);

        // background: pink;
        .bmsg {
          display: block;
          width: 460px;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
        .cercle {
          box-sizing: border-box;
          padding-top: 5px;
          width: 33px;
          height: 33px;
          font-size: 20px;
          border-radius: 50%;
          background: red;
          color: #fff;
          text-align: center;
          align-items: center;
        }
      }
    }
    .img {
      margin: 22px 24px 0;
      width: 108px;
      height: 108px;
      box-sizing: border-box;
      margin-bottom: 18px;
      text-align: center;
      // padding: 18px;
    }
  }
}
</style>
